<template>
  <div>
    <div id='main'>
    </div>
    <p style="font-size:0.4rem;">force01</p>
  </div>

</template>

<script>
export default {
  name: 'force01',
  props:['datas'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tabledata:[],
      tabledataya:[],
      tabledatayb:[],
      tabledatayc:[],
      tabledatayd:[],
      tabledataye:[],
      tabledataym:[],
    }
  },
  created() {
    //用于px转换rem，echarts读取不到rem，所以这里要换算
    var d = document.documentElement;
    var cw = d.clientWidth || 750;
    document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
    this.getLoading()
  },
  mounted() {
    this.showCharts()
  },
  methods:{
    getLoading(){
      var that=this;
      that.tabledata=that.datas;
      let ag=that.tabledata;
      console.log(that.tabledata)
      that.tabledataya=[];//这是柱状图的数据,例:10
      that.tabledatayc=[];//这是y轴显示百分比的地方,例:10%
      that.tabledatayb=[];//这是y轴显示时间的地方,例：2h18
      that.tabledatayd=[];//这是y轴显示类目名称,例：'深睡眠'
      that.tabledataye=[];//这是区间最小数据
      that.tabledataym=[];//这是区间最大数据
      for(var i=0;i<ag.length;i++){
        that.tabledataya.push(ag[i].ya)//这是柱状图的数据
        that.tabledatayb.push(ag[i].yc)//这是y轴显示时间的地方
        that.tabledatayd.push(ag[i].yb)//这是y轴显示类目名称
        if(ag[i].yd.a1=='0'){
          ag[i].yd.a1='-'
        }
        if(ag[i].yd.a2=='0'){
          ag[i].yd.a2='-'
        }
        that.tabledataye.push(ag[i].yd.a1);//这是区间最小数据
        that.tabledataym.push(ag[i].yd.a2);//这是区间最大数据
        that.tabledatayc.push(ag[i].ya+'%')//这是y轴显示百分比的地方
      }

    },
    //rem转换px
    remToPx(rem) {
      var fontSize = document.documentElement.style.fontSize;
      return Math.floor(rem * fontSize.replace('px', ''));
    },
    showCharts(){
       this.getLoading()
       // 基于准备好的dom，初始化echarts实例,采用svg渲染
       var myChart = this.$echarts.init(document.getElementById('main'),null, {renderer: 'svg'});

       // 绘制图表
       var myColor = ['#f84343', '#f1c47d', '#93bda5', '#e3f700'];//这是图表颜色
       var option = {
         calculable:false,
         grid: {
                 left: this.remToPx(0.3),
                 top: '12%',
                 right: this.remToPx(0.3),
                 bottom: '8%',
                 containLabel: true
             },
           backgroundColor: '#0f2e6f',
           xAxis: {
               show: false
           },
           yAxis: [{
               show: true,
               data: this.tabledatayd,
               inverse: true,
               boundaryGap:['6%','6%'],

               axisLine: {
                   show: false
               },
               splitLine: {
                   show: false
               },
               axisTick: {
                   show: false
               },
               axisLabel: {
                   textStyle: {
                       color:"#ffffff",
                       fontSize:this.remToPx(0.3),
                   },

               },

           }, {
               show: true,
               inverse: true,
               data: this.tabledatayb,
               axisLabel: {
                   textStyle: {
                       color: "#ffffff"
                   }
               },
               axisLine: {
                   show: false
               },
               splitLine: {
                   show: false
               },
               axisTick: {
                   show: false
               },

           },
           {
               show: true,
               inverse: true,
               data: this.tabledatayc,
               offset:this.remToPx(0.7),//偏移量
               axisLabel: {
                   textStyle: {
                       color:"#426ead",
                   }
               },
               axisLine: {
                   show: false
               },
               splitLine: {
                   show: false
               },
               axisTick: {
                   show: false
               },

           }],
           series: [
             {
               name: '中心轴',
               type: 'bar',
               hoverAnimation:false,
               yAxisIndex: 1,
               data: ['180','180','180','180'],
               barWidth: 1,
               itemStyle: {
                 normal: {
                   barBorderRadius: this.remToPx(0.3),
                   color:"#315ab1"
                 }
               },
               label: {
                 show: false,
               },

             },
             {
             name: '外百分比',
             type: 'bar',
             hoverAnimation:false,
             yAxisIndex: 2,
             data: this.tabledataya,
             // barGap:"50%",
             barWidth: this.remToPx(0.18),
             itemStyle: {
                 normal: {
                     barBorderRadius: this.remToPx(0.3),
                     color: function(params) {
                         var num = myColor.length;
                         return myColor[params.dataIndex % num]
                     },
                 }
             },
             label: {
                 normal: {
                     show: false,
                     position: 'inside',
                     formatter: '{c}%'
                 }
             },
           },


             {
               name: '最小值',
               type: 'bar',
               stack: '最小值',
               label: {
                 normal: {
                   show: true,
                   position: 'top'

                 }
               },
               yAxisIndex: 0,
               barWidth: this.remToPx(0.22),
               itemStyle: {
                 barBorderRadius: 20,
                 normal: {
                   barBorderColor: 'rgba(0,0,0,0)',
                   color: 'rgba(0,0,0,0)'
                 },
                 emphasis: {
                   barBorderColor: 'rgba(0,0,0,0)',
                   color: 'rgba(0,0,0,0)'
                 }
               },
               data: this.tabledataye,
             },
             {
               name: '最大值',
               type: 'bar',
               stack: '最小值',
               barGap:"-130%",
               barWidth: this.remToPx(0.28),
               label: {
                 normal: {
                   show: true,
                   position: 'bottom'
                 }
               },
               itemStyle: {
                 barBorderRadius: 20,
                 color:'rgba(0,0,0,0)',
                 borderColor:'red'
               },
               data: this.tabledataym,
             },
           ]
       };

       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
 }
#main{
  width:100%;height:4rem;float:left;-webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
</style>
